<template>
    <div id="temp1">
        <div class="sw">
            <swiper :list=list></swiper>
        </div>
        <div class="buy point" >
            <h4 class="title">{{buinfo.title}}</h4>
            <p>
                <span>销售价：￥{{buinfo.sell_price}}</span> &nbsp;&nbsp;
                <span>市场价：<del>￥{{buinfo.market_price}}</del></span>  
                
            </p>
            <transition @before-enter="beforenter" @enter='enter' @after-enter='afterenter'>
                <div class="ball" v-show='isshow'></div>
            </transition>
            <p>购买数量：</p> 
             <getnumber class="comp" @send='getdata'></getnumber>         <!-- 使用加入购物车组件 -->
            <p>
                <mt-button type="primary" size="small">立即购买</mt-button>
                <mt-button type="danger" size="small" @click="sendcarnumber">加入购物车</mt-button>
            </p>
        </div>
       <div class="params">
           <p class="title">商品参数</p>
            <ul>
                <li>商品货号：{{buinfo.goods_no}}</li>
                <li>库存数量：{{buinfo.stock_quantity}}</li>
                <li>上市时间：{{buinfo.add_time | datafmt('YYYY-MM-DD')}}</li>
            </ul>
       </div>
       <router-link :to="'/goods/goodsdesc/'+id">
            <mt-button class='pic' type="primary" size="large">图文详情</mt-button>
       </router-link>
       <router-link :to="'/goods/goodscomment/'+id">
       <mt-button type="danger" size="large">商品评论</mt-button>
       </router-link>
    </div>
</template>
<script>
    import common from '../../common.js';
    import swiper from '../subcom/swiper.vue';
    import { Toast } from 'mint-ui';
    import getnumber from '../subcom/number.vue';
    import {vm,COUNTS} from '../../car.js';
    import {KEY,setitem} from '../../localstro.js'
    export default {
        data() {
            return {
                id: '',
                list: [],
                buinfo:{},
                counts:1,
                isshow:false,
            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getimgs();
            this.lists();
        },
        components: {
            swiper,
            getnumber,
        },
        methods: {
            beforenter(el){      //这里定义动画未开始前的状态
                el.style.transform = 'translate(0px,0px)'
            },
            enter(el,done){        //这里定义动画结束时的位置，用done()完成动画完成的标记
                el.offsetWidth;      //保证实时刷新
                el.style.transform = 'translate(75px,325px)'
                done()
            },
            afterenter(el){            //动画执行完毕，设置初始位置
                this.isshow = false;
            },
            sendcarnumber(){
                vm.$emit(COUNTS,this.counts);     //非父子组件间的传值
                setitem({'goodsid':this.id,'counts':this.counts});
                this.isshow = !this.isshow;
            },
            getdata(input){
                this.counts = input;        //this.counts是要加入的数量
            },
            getimgs() {
                var url = common.temurl + "/api/getthumimages/  " + this.id;
                this.$http.get(url).then(function (res) {
                    var tem = res.body.message;
                    var imgs = [];
                    tem.forEach(function (element) {
                        imgs.push({ 'img': element.src })
                    });
                    this.list = imgs;
                })
            },
            lists(){
                var url = common.temurl + '/api/goods/getinfo/'+this.id;
                this.$http.get(url).then(function(res){
                    if(res.body.message[0].status == 0){
                        Toast('信息请求出错');
                        return;
                    }
                    this.buinfo = res.body.message[0];
                })
            }
        },
    };
</script>
<style scoped lang="less">
    .ball {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: red;
        position: absolute;
        left: 160px;
        transition: all 0.4s;
        z-index: 90;
    }
    #temp1{
        padding: 5px;
    }
    .sw {
        border: 1px solid #ccc;
        overflow: hidden;
        border-radius: 5px;
        margin: 5px;
    }
    .buy {
        border: 1px solid #ccc;
        border-radius: 5px;
        margin-top: 20px;
        padding: 5px;
        margin: 5px;    
    }
   /*  .buy .title {
        height: auto;
        border-bottom: 1px solid #ccc;
        color: #5d97ee;
        padding-bottom: 10px;
    } */
    .buy{
        .title{
            height: auto;
        border-bottom: 1px solid #ccc;
        color: #5d97ee;
        padding-bottom: 10px;
        }
    }
   /*  .buy del {
        color: rgb(168, 35, 35);
        font-size: 16px;
    } */
    .buy{
        del{
            color: rgb(168, 35, 35);
        font-size: 16px; 
        }
    }
    .params {
        border: 1px solid #ccc;
        margin: 5px;
        border-radius: 5px;
        padding: 5px;
        margin-top: 10px;
    }
    .params>.title {
        border-bottom: 1px solid #ccc;
    }
    .params ul {
        list-style: none;
    }
    .pic {
        margin: 10px 0 20px 0;
    }
    .params ul li{
        line-height: 20px;
        font-size: 14px;
    }
    .point {
        position: relative;
    }
    .comp {
        position: absolute;
        bottom:55px;
        left: 60px;
    }
</style>    